<template>
    <div>
        <div class="inputStr">

            <el-button @click="showAdd" style="margin: 10px" type="primary">添加手动组卷</el-button>
            <el-button @click="centerDialogVisible3 = true" style="margin: 10px" type="primary">添加随机组卷</el-button>
            <el-select clearable style="width: 150px;margin-right: 30px;" v-model="pagination.categoryId"
                       placeholder="请选择试题类型">
                <el-option
                        v-for="item in categoryList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-input v-model="pagination.queryContent" clearable style="width: 150px" placeholder="请输入题干内容"></el-input>
            <el-button type="primary" icon="el-icon-search" style="margin: 15px" @click="queryStr">搜索</el-button>
        </div>
        <div v-loading="loading">
            <el-table
                    :data="questionList"
                    border
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange2"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        fixed
                        align="center"
                        :show-overflow-tooltip="true"
                        prop="questionContent"
                        label="题目内容">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="题目类型">
                    <template slot-scope="scope">
            <span
                    v-html="scope.row.questionType==1?'单选题':scope.row.questionType==2?'多选题':scope.row.questionType==3?'判断题':'简答题'"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="创建人">
                    <template slot-scope="scope">
                        <span v-html="scope.row.user.realName"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="detailsShow(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="padding-top: 40px">
            <el-pagination
                    class="pagiantion"
                    :total="total"
                    @current-change="handleSelectionChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>

        <el-dialog
                title="添加试题"
                :visible.sync="centerDialogVisible2"
                width="30%"
                center>
            <div style="text-align: center">
                <el-input style="width: 180px"
                          placeholder="请输入试卷名称"
                          v-model="paperQuestion.paperName"
                          clearable>
                </el-input>
                <br>
                <el-tag style="margin-top: 20px">考试时长</el-tag>
                <el-input placeholder="（分钟）" v-model="paperQuestion.checkTime" style="width: 100px"
                          oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                <br>
                <el-tag style="margin-top: 20px">考试时间</el-tag>
                <el-date-picker size="small" style="width: 200px"
                                v-model="paperQuestion.startCheckStr"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm"
                                placeholder="选择日期时间"
                                default-time="12:00:00">
                </el-date-picker>
                <br>
                <el-tag style="margin-top: 20px">单选题</el-tag>
                <el-input disabled style="width: 50px;margin-right: 30px" v-model="paperQuestion.radioNum" :min="0"
                          label="单选题数量"></el-input>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="paperQuestion.radioScore"
                          clearable>
                </el-input>
                <br>
                <el-tag style="margin-top: 20px">多选题</el-tag>
                <el-input disabled style="width: 50px;margin-right: 30px" v-model="paperQuestion.multiNum" :min="0"
                          label="多选题数量"></el-input>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="paperQuestion.multiScore"
                          clearable>
                </el-input>
                <br>
                <el-tag style="margin-top: 20px">判断题</el-tag>
                <el-input disabled style="width: 50px;margin-right: 30px" v-model="paperQuestion.judgeNum" :min="0"
                          label="判断题数量"></el-input>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="paperQuestion.judgeScore"
                          clearable>
                </el-input>
                <br>
                <el-tag style="margin-top: 20px">简答题</el-tag>
                <el-input disabled style="width: 50px;margin-right: 30px" v-model="paperQuestion.shortAnswerNum"
                          :min="0"
                          label="简答题数量"></el-input>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="paperQuestion.shortAnswerScore"
                          clearable>
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="saveQuestion">确 定</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="试题详情"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <div style="text-align: center">
        <span
                style="font-weight: bold">题目:</span>{{
                question.questionContent
                }}({{
                question.questionType == 1 ? '单选题' : question.questionType == 2 ? '多选题' : question.questionType == 3 ?
                '判断题' : '简答题'
                }})<br>
                <div v-show="question.questionType==1 || question.questionType==2" style="margin-top: 10px">
                    <span style="margin-right: 70px" v-html="'A、'+question.optionA"></span>
                    <span v-html="'B、'+question.optionB"></span><br>
                    <span style="margin-right: 70px" v-html="'C、'+question.optionC"></span>
                    <span v-html="'D、'+question.optionD"></span><br><br>
                    <span v-if="question.questionType==1" style="font-weight: bold;">参考答案:</span>{{ question.radioAnswer
                    }}
                    <span v-if="question.questionType==2" style="font-weight: bold;">参考答案:</span>{{
                    question.selectAnswer }}
                </div>

                <div v-show="question.questionType==3" style="margin-top: 10px">
                    <span style="font-weight: bold;">参考答案:</span>{{ question.trueFalse == 1 ? '正确' : '错误' }}
                </div>

                <div v-show="question.questionType==4" style="margin-top: 10px">
                    <span style="font-weight: bold;">参考答案:</span>{{ question.answerContent }}
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="centerDialogVisible = false">关 闭</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="添加随机组卷"
                :visible.sync="centerDialogVisible3"
                width="30%"
                :before-close="beforeGo"
                center>
            <div style="text-align: center">
                <el-input style="width: 50%"
                          placeholder="请输入试卷名称"
                          v-model="randomPaper.paperName"
                          clearable>
                </el-input>
                <br>
                <el-tag style="margin-top: 20px">考试时长</el-tag>
                <el-input placeholder="（分钟）" v-model="randomPaper.checkTime" style="width: 100px"
                          oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                <br>
                <el-tag style="margin-top: 20px">考试时间</el-tag>
                <el-date-picker size="small" style="width: 200px"
                                v-model="randomPaper.startCheckStr"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm"
                                placeholder="选择日期时间"
                                default-time="12:00:00">
                </el-date-picker>
                <br>
                <el-tag style="margin-top: 20px">单选题</el-tag>
                <el-input-number style="width: 100px;margin-right: 30px" v-model="randomPaper.radioNum" :min="0"
                                 label="单选题数量"></el-input-number>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="randomPaper.radioScore"
                          clearable>
                </el-input>
                <br>

                <el-tag style="margin-top: 20px">多选题</el-tag>
                <el-input-number style="width: 100px;margin-right: 30px" v-model="randomPaper.multiNum" :min="0"
                                 label="多选题数量"></el-input-number>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="randomPaper.multiScore"
                          clearable>
                </el-input>
                <br>

                <el-tag style="margin-top: 20px">判断题</el-tag>
                <el-input-number style="width: 100px;margin-right: 30px" v-model="randomPaper.judgeNum" :min="0"
                                 label="判断题数量"></el-input-number>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="randomPaper.judgeScore"
                          clearable>
                </el-input>
                <br>

                <el-tag style="margin-top: 20px">简答题</el-tag>
                <el-input-number style="width: 100px;margin-right: 30px" v-model="randomPaper.shortAnswerNum" :min="0"
                                 label="简答题数量"></el-input-number>
                <el-tag>分值</el-tag>
                <el-input oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px"
                          placeholder="输入分值"
                          v-model="randomPaper.shortAnswerScore"
                          clearable>
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="closeAdd">取 消</el-button>
    <el-button type="primary" @click="addRandomPaper">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "CreatePaper",
        data() {
            return {
                loading: false,
                centerDialogVisible: false,
                centerDialogVisible2: false,
                centerDialogVisible3:false,
                randomPaper: {},
                total: 0,
                checkList: [],  //选中的试题id
                paperQuestion: {},
                // radioNum: 0,   //单选题数量
                // multiNum: 0,    //多选题数量
                // judgeNum: 0,    //判断题数量
                // shortAnswerNum: 0,  //简答题数量
                question: {},
                questionList: [],
                categoryList: [
                    {
                        id: 1,
                        name: "单选题"
                    },
                    {
                        id: 2,
                        name: "多选题"
                    }, {
                        id: 3,
                        name: "判断题"
                    }, {
                        id: 4,
                        name: "简答题"
                    }],
                pagination: {
                    currentPage: 1,
                    pageSize: 5,
                    queryContent: "",
                    categoryId: null
                },
            }
        },
        mounted() {
            this.findPage();
        },
        methods: {
            addRandomPaper(){
                if (this.randomPaper.paperName==null||this.randomPaper.paperName==''){
                    this.$message.error("请输入试卷名称");
                    return;
                }
                if (this.randomPaper.checkTime==null||this.randomPaper.checkTime==''){
                    this.$message.error("请输入考试时长");
                    return;
                }
                if (this.randomPaper.startCheckStr==null||this.randomPaper.startCheckStr==''){
                    this.$message.error("请输入考试开始时间");
                    return;
                }
                if (this.randomPaper.radioNum!=null&&this.randomPaper.radioNum!=0){
                    if (this.randomPaper.radioScore==null||this.randomPaper.radioScore==''){
                        this.$message.error("请输入单选题分值");
                        return;
                    }
                }
                if (this.randomPaper.multiNum!=null&&this.randomPaper.multiNum!=0){
                    if (this.randomPaper.multiScore==null||this.randomPaper.multiScore==''){
                        this.$message.error("请输入多选题分值");
                        return;
                    }
                }
                if (this.randomPaper.judgeNum!=null&&this.randomPaper.judgeNum!=0){
                    if (this.randomPaper.judgeScore==null||this.randomPaper.judgeScore==''){
                        this.$message.error("请输入判断题分值");
                        return;
                    }
                }
                if (this.randomPaper.shortAnswerNum!=null&&this.randomPaper.shortAnswerNum!=0){
                    if (this.randomPaper.shortAnswerScore==null||this.randomPaper.shortAnswerScore==''){
                        this.$message.error("请输入简答题分值");
                        return;
                    }
                }
                this.axios.post("/paper/randomPaper/add",this.randomPaper).then(resp=>{
                    if (resp.data.statusCode == 200) {
                        this.centerDialogVisible3=false;
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.findPage();
                    }
                })
            },
            beforeGo(done) {
                this.randomPaper = {};
                done();
            },
            saveQuestion() {
                if (this.paperQuestion.paperName == null || this.paperQuestion.paperName == '') {
                    this.$message.error("请输入试卷名称");
                    return;
                }
                if (this.paperQuestion.checkTime == null || this.paperQuestion.checkTime == '') {
                    this.$message.error("请输入考试时长");
                    return;
                }
                if (this.paperQuestion.startCheckStr == null || this.paperQuestion.startCheckStr == '') {
                    this.$message.error("请输入考试时间");
                    return;
                }
                if (this.paperQuestion.radioNum != 0) {
                    if (this.paperQuestion.radioScore == null || this.paperQuestion.radioScore == '') {
                        this.$message.error("请输入单选题分值");
                        return;
                    }
                }
                if (this.paperQuestion.multiNum != 0) {
                    if (this.paperQuestion.multiScore == null || this.paperQuestion.multiScore == '') {
                        this.$message.error("请输入多选题分值");
                        return;
                    }
                }
                if (this.paperQuestion.judgeNum != 0) {
                    if (this.paperQuestion.judgeScore == null || this.paperQuestion.judgeScore == '') {
                        this.$message.error("请输入判断题分值");
                        return;
                    }
                }
                if (this.paperQuestion.shortAnswerNum != 0) {
                    if (this.paperQuestion.shortAnswerScore == null || this.paperQuestion.shortAnswerScore == '') {
                        this.$message.error("请输入简答题分值");
                        return;
                    }
                }

                this.axios.post("/paper/manual/add/" + this.checkList, this.paperQuestion).then(resp => {
                    if (resp.data.statusCode == 200) {
                        this.centerDialogVisible2 = false;
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.findPage();
                    }
                    this.centerDialogVisible2 = false;
                })
            },
            handleSelectionChange2(val) {
                this.paperQuestion.radioNum = 0;     //单选题数量
                this.paperQuestion.multiNum = 0;    //多选题数量
                this.paperQuestion.judgeNum = 0;    //判断题数量
                this.paperQuestion.shortAnswerNum = 0;  //简答题数量
                this.checkList = [];
                if (val.length > 0) {
                    for (let i = 0; i < val.length; i++) {
                        if (val[i].questionType == 1) {
                            this.paperQuestion.radioNum += 1;
                        } else if (val[i].questionType == 2) {
                            this.paperQuestion.multiNum += 1;
                        } else if (val[i].questionType == 3) {
                            this.paperQuestion.judgeNum += 1;
                        } else {
                            this.paperQuestion.shortAnswerNum += 1;
                        }

                        this.checkList.push(val[i].id);
                    }
                }
            },
            showAdd() {
                if (this.checkList.length == 0) {
                    this.$message.info("请选择题目");
                    return;
                }
                this.centerDialogVisible2 = true;
            },

            detailsShow(row) {
                this.question = row;
                this.centerDialogVisible = true;
            },
            queryStr() {
                this.findPage();
            },
            handleSelectionChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            findPage() {
                this.loading = true;
                this.axios.post("/question/findPage", this.pagination).then(resp => {
                    if (resp.data.statusCode == 200) {
                        this.total = resp.data.data.total;
                        //this.pagination.toal = resp.data.data.total;
                        this.questionList = resp.data.data.data;
                    }
                    this.loading = false;
                })
            },
        }
    }
</script>

<style scoped>
    .inputStr {
        width: 800px;
        margin-left: 260px;
    }
</style>
